<%--
  Created by IntelliJ IDEA.
  User: 张洪瑞
  Date: 2021-6-14  0014
  Time: 上午 10:01:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>广州城市理工学院</title>
    <!-- 引入 layui.css -->
    <!--pageContext.request.contextPath:获取项目的路径 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-blue">
        <div class="layui-logo layui-hide-xs" style="color: #FFFFFF;font-size: 24px;font-style: italic">华广人事管理</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <img src="imgs/log1.png" alt="" style="width: 60px;height: 60px;">
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="javascript:">华广欢迎你！</a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide-xs">
                <a href="javascript:"><i class="layui-icon layui-icon-time" style="font-size: 18px; color: #FFFFFF;font-weight: bold;"></i>
                    <span id="timeText"></span>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="logout"><i class="layui-icon layui-icon-logout" style="font-size: 18px; color: #FFFFFF;font-weight: bold;"></i> 退出登录</a>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div style="text-align: center;margin: 15px 0px 15px -25px">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;" data-method="setTop" id="myinfo">
                        <img src="imgs/Applet.jpg" class="layui-nav-img" style="width: 130px;height: 130px;">
                        <p style="font-size: 16px;color: #FFFFFF;margin-top: 5px;">欢迎：${user.username}登陆！</p>
                    </a>
                </li>
            </div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">
                        <i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                        用户管理</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="selectUser.jsp"
                               data-id="selectUser"
                               data-title="<i class='layui-icon layui-icon-search' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 用户查询"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            用户查询</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="addUser.jsp"
                               data-id="addUser"
                               data-title="<i class='layui-icon layui-icon-add-1' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 添加用户"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-add-1" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            添加用户</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-component" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i> 部门管理</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="selectDept.jsp"
                               data-id="selectDept"
                               data-title="<i class='layui-icon layui-icon-search' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 部门查询"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            部门查询</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="addDept.jsp"
                               data-id="addDept"
                               data-title="<i class='layui-icon layui-icon-add-1' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 添加部门"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-add-1" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            添加部门</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-cols" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i> 职位管理</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="selectJob.jsp"
                               data-id="selectJob"
                               data-title="<i class='layui-icon layui-icon-search' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 职位查询"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            职位查询</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="addJob.jsp"
                               data-id="addJob"
                               data-title="<i class='layui-icon layui-icon-add-1' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 添加职位"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-add-1" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            添加职位</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-group" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i> 员工管理</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="selectEmployee.jsp"
                               data-id="selectEmployee"
                               data-title="<i class='layui-icon layui-icon-search' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 员工查询"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            员工查询</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="addEmployee.jsp"
                               data-id="addEmployee"
                               data-title="<i class='layui-icon layui-icon-add-1' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 添加员工"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-add-1" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            添加员工</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-auz" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i> 角色管理</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="selectRole.jsp"
                               data-id="selectRole"
                               data-title="<i class='layui-icon layui-icon-search' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 角色查询"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            角色查询</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="addRole.jsp"
                               data-id="addRole"
                               data-title="<i class='layui-icon layui-icon-add-1' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 添加角色"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-add-1" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            添加角色</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-notice" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i> 公告管理</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="selectNotice.jsp"
                               data-id="selectNotice"
                               data-title="<i class='layui-icon layui-icon-search' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 公告查询"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            公告查询</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                           data-url="addNotice.jsp"
                           data-id="addNotice"
                           data-title="<i class='layui-icon layui-icon-add-1' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 添加公告"
                           data-type="tabAdd"
                           class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-add-1" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            添加公告</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-print" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i> 下载中心</a>
                    <dl class="layui-nav-child">
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                               data-url="downloadfile.jsp"
                               data-id="downloadfile"
                               data-title="<i class='layui-icon layui-icon-download-circle' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 下载文件"
                               data-type="tabAdd"
                               class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-search" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            下载文件</a></dd>
                        <dd style="padding-left: 30px;"><a href="javascript:;"
                           data-url="uploadfile.jsp"
                           data-id="uploadfile"
                           data-title="<i class='layui-icon layui-icon-upload-drag' style='font-size: 18px; color: #1E9FFF;font-weight: bold;'></i> 文件上传"
                           data-type="tabAdd"
                           class="site-demo-active"
                        >
                            <i class="layui-icon layui-icon-upload-drag" style="font-size: 18px; color: #1E9FFF;font-weight: bold;"></i>
                            文件上传</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this">
                    <i class="layui-icon layui-icon-home" style="font-size: 18px; color: #009688;font-weight: bold;"></i>
                    欢迎首页</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                   <iframe src="welcome.jsp" style="width: 100%;height: 540px;"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div style="text-align: center;">华南理工大学广州学院 18计科3班 张洪瑞 &copy;Copyright：2021-2022</div>
    </div>
</div>
</body>
<!-- 将script标签放在body标签的外面，以免影响页面的加载 -->
<script>
    $(function () {
        //创建一个定时器
        var myTime = setInterval(function () {
            getTime();
        })
    },1000);
    //单独定义一个方法，可以获取时间按照自己的显示方式显示出来
    function getTime(){
        var time = new Date();
        //分别获取年月日 时分秒
        var y = time.getFullYear();
        var M = (time.getMonth()+1)<10?('0'+(time.getMonth()+1)):time.getMonth()+1;
        var D = time.getDate()<10?('0'+time.getDate()):time.getDate();
        var H = time.getHours()<10?('0'+time.getHours()):time.getHours();
        var m = time.getMinutes()<10?('0'+time.getMinutes()):time.getMinutes();
        var s = time.getSeconds()<10?('0'+time.getSeconds()):time.getSeconds();
        var timeString = y+"年"+M+"月"+D+"日&nbsp;&nbsp;"+H+":"+m+":"+s+"&nbsp;&nbsp;星期"+"日一二三四五六".charAt(time.getDay());
        $('#timeText').html(timeString);
    }
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,title:"<img src='imgs/log1.png' class='layui-nav-img' style='width: 50px;height: 50px;'>系统说明"
                    ,content: '<div style="padding: 15px;"><iframe src="leftContent.jsp" width="230px"></iframe></div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });
        //触发事件
        var active = {
            setTop: function(){
                //示范一个公告层
                layer.open({
                    type: 2
                    ,title: '个人资料'
                    ,area: ['460px','550px']
                    ,shade: 0
                    ,maxmin:true
                    ,content: 'myinfo.jsp'
                    ,zIndex:layer.zIndex
                });
            },
            tabAdd: function (url, id, title) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {  //添加到id为demo的选项卡里面
                    title: title,
                    content: '<iframe data-frameid="' + id
                        + '" scrolling="auto" frameborder="0" src="'
                        + url + '" style="width:100%;height: 730px"></iframe>',
                    id: id
                    //规定好的id
                })
                element.render('tab');
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            },
            tabDeleteAll: function (ids) {//删除所有
                $.each(ids, function (i, item) {
                    element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
                })
            }
        };
        $('#myinfo').on('click', function(){   //图片的点击事件
            var othis = $(this), //获得当前点击的按钮对象othis
            method = othis.data('method');    //获得当前点击对象的data-method绑定的方法名
            active[method] ? active[method].call(this, othis) : '';//调用方法
        });
        //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
        $('.site-demo-active').on(
            'click',
            function () {
                var dataid = $(this);

                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active
                        .tabAdd(dataid.attr("data-url"), dataid
                            .attr("data-id"), dataid
                            .attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"),
                        function () {
                            //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                            if ($(this).attr("lay-id") == dataid
                                .attr("data-id")) {
                                isData = true;
                            }
                        })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid
                            .attr("data-id"), dataid
                            .attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });
    });
</script>
</html>
